<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>04_元素类名操作</title>
		<!-- 元素类名操作  针对css中类名，可以做添加、移除、切换、包含类名操作
		     addClass()     有参【一个参，多个参】
			                语法：addClaas("类名")
						    语法：addClaas("类名1 类名1")
			               功能：匹配元素集合中所有元素添加一个类名或者多个类名
			removeClass()	有参【一个参，多个参】
			                功能：匹配元素集合中所有元素移除一个类名或者多个类名	
							语法：addClaas("类名")
							语法：addClaas("类名1 类名1")
							
			toggleClass()   功能：如果元素有指定类名则移除，没有则添加
			hasClass()      功能：检查匹配元素是否存在指定类名 返回bool
		 -->
	</head>
	<script src="../js/jquery-1.11.1.js"></script>
	<style>
		.bg{
		    width: 300px;
		    height: 300px;
		    background-color: #55ff7f;
		}
		.bd{
			border: 10px solid #55ffff;
			border-radius: 50%;
		}
	</style>
	<body>
		<!-- html四个按钮 两个空间 -->
		 <h1>Class 操作示例</h1>
		    <div id="targetElement">
		    </div>
		    <button id="addClassBtn">添加 类名</button>
		    <button id="removeClassBtn">移除 类名</button>
		    <button id="toggleClassBtn">切换 类名</button>
		    <button id="hasClassBtn">检查 类名</button>
		    <div id="resultArea"></div>
			<script>
				//1.类名切换    css存在可用类名
				//点击添加类名  实现效果  300*300红色背景
				$("#addClassBtn").click(function(){
					$("#targetElement").addClass("bg bd")
					$("#resultArea").html("<h4>已切换样式.bg .bd</h4>")
				});
				//2.移除类名：实现效果：点击移除类名实现  300*300红色背景
				$("#removeClassBtn").click(function(){
					$("#targetElement").removeClass("bd bg")
					$("#resultArea").html("<h4>已移除换样式.bd</h4>")
				});
				//3.切换类名：实现效果：点击切换类名实现300*300的圆边框红色背景
				//4.样式全部移除，实现效果：300*300
				$("#toggleClassBtn").click(function(){
					$("#targetElement").toggleClass("bg")
					$("#resultArea").html("<h4>换样式bg .bd</h4>")
				});
				
				//5.检查类名书否存在
				$("#hasClassBtn").click(function(){
					var hc=$("#targetElement").hasClass("bg")
					$("#resultArea").text("目标元素 bg 类名是否存在"+hc)
				});
				
				
			</script>
	</body>
</html>